<form class = "ajax-form" action="{:url('')}" method="post">
    <div class = "form-group row">
        <label class = "col-sm-2 col-xs-12">权限名称</label>
        <div class = "col-sm-10 col-xs-12">
            <input type="text" name="name" value = "{$auth.name|default=''}" disabled placeholder="请输入权限名称"/>
        </div>
    </div>
    <div class = "form-group row">
        <label class = "col-sm-2"></label>
        <div class = "col-sm-10">
            {volist name="nodes" id="vo"}
                <div class = "first-node">
                    <input type="checkbox" value = "{$vo.id}" name="nodes[]" {if condition="in_array($vo.id, $node_ids)"}checked{/if} data-m-flag = "m-{$vo.id}"/>{$vo.name}
                </div>
                {notempty name="$vo.sub"}
                {volist name="vo.sub" id="vo1"}
                    <div class = "second-node">
                        <input type="checkbox" value = "{$vo1.id}" name="nodes[]" {if condition="in_array($vo1.id, $node_ids)"}checked{/if} data-m-flag="m-{$vo.id}-{$vo1.id}"/>{$vo1.name}
                        {notempty name="$vo1.sub"}
                        {volist name="vo1.sub" id="vo2"}
                        <div class = "third-node">
                            <input type="checkbox" value = "{$vo2.id}" name="nodes[]" {if condition="in_array($vo2.id, $node_ids)"}checked{/if} data-m-flag="m-{$vo.id}-{$vo1.id}-{$vo2.id}"/>{$vo2.name}
                            {notempty name="vo2.sub"}
                            <div class = "forth-node">
                                {volist name="vo2.sub" id="vo3"}
                                <input type="checkbox" value = "{$vo3.id}" name="nodes[]" {if condition="in_array($vo3.id, $node_ids)"}checked{/if} data-m-flag="m-{$vo.id}-{$vo1.id}-{$vo2.id}-{$vo3.id}"/>{$vo3.name}
                                {/volist}
                            </div>
                            {/notempty}
                        </div>
                        {/volist}
                        {/notempty}
                    </div>
                {/volist}
                {/notempty}
            {/volist}
        </div>

    </div>
    {if isset($auth['id'])}<input type='hidden' value='{$auth.id}' name='id'>{/if}
    <div class = "form-group user-btn-group">
        <button class="btn btn-success" type='submit'>保存</button>
        <button class="btn btn-warning" type='button' data-confirm="确定要取消数据保存吗？" data-dismiss="modal">取消</button>
    </div>
    <script>
        $(document).on("change", "input[data-m-flag]", function(e){
            let $this = $(this)
            let data_m_flag = $this.attr("data-m-flag")
            let flag_arr = data_m_flag.split("-")
            let isChecked = $this.is(":checked")
            let parents = []
            for(let i = 1;i < flag_arr.length - 1;i++) {
                if(parents.length === 0) {
                    parents.push('m-' + flag_arr[i]);
                }else {
                    parents.push(parents[parents.length - 1] + '-' + flag_arr[i])
                }
            }
            if(isChecked) {
                //如果选中，选中当前父节点和所有子节点
                for(let i = 0;i < parents.length;i++) {
                    $(`input[data-m-flag=${parents[i]}]`).prop("checked", "checked")
                }
                $(`input[data-m-flag|=${data_m_flag}]`).prop("checked", "checked")
            }else {
                $(`input[data-m-flag|=${data_m_flag}]`).prop("checked", "")
            }
        })
    </script>
</form>